<template>
  <div>
    <div class="title-page">
      <div class="detail-title" :style="{ fontSize: props.fontSize + 'px' }">
        {{ props.title }}
      </div>
      <div><slot></slot></div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: () => "Address Information",
  },
  fontSize: {
    type: String,
    default: () => "16",
  },
});
</script>

<style scoped>
.detail-title {
  position: relative;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  padding-left: 8px;
}
.detail-title:before {
  content: " ";
  position: absolute;
  transform: translateY(-51%);
  top: 50%;
  left: 0;
  width: 3px;
  height: 16px;
  background-color: #459bf8;
}
.title-page {
  display: flex;
  justify-content: space-between;
}
</style>
